<template>
  <div class="advert-create-or-edit">
    <el-card>
      <div slot="header">
        <el-button @click="$router.back()">返回</el-button>
      </div>
      <el-form label-width="120px" :model="adForm">
        <el-form-item label="广告位名称">
          <el-input v-model="adForm.name"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSubmit">提交</el-button>
          <el-button @click="handleReset" v-if="!advertId">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import { saveOrUpdate, getSpaceById } from '@/services/advert'

export default Vue.extend({
  name: 'AdvertSpaceCreateOrEdit',
  props: {
    advertId: {
      type: [String, Number]
    }
  },
  data () {
    return {
      adForm: {
        name: ''
      }
    }
  },
  created () {
    if (this.advertId) {
      this.loadInfo()
    }
  },
  methods: {
    async handleSubmit () {
      this.$confirm('是否提交数据?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await saveOrUpdate(this.adForm)
        this.$message.success('操作成功')
        this.$router.back()
      }).catch(console.log)
    },
    handleReset () {
      this.adForm.name = ''
    },
    async loadInfo () {
      const { data } = await getSpaceById(this.advertId)
      this.adForm = data.content
    }
  }
})
</script>
